<template>
  <div>
    <!-- 顶部导航 -->
    <el-header>
      <!-- <div class="header-container">首 页</div> -->
      <el-button type="primary" @click="$router.push({ name: 'list' })"
        >首 页</el-button
      >
      <div>
        <el-dropdown
          @command="handleCommand"
          szie="small"
          style="margin-right: 10px"
        >
          <span class="el-dropdown-link">
            编辑区<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="a">MD文档</el-dropdown-item>
            <el-dropdown-item command="b">思维导图</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        
        <div class="login">
          <el-button
            type="primary"
            size="small"
            @click="$router.push({ name: 'login' })"
            >登 录</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="$router.push({ name: 'register' })"
            >注 册</el-button
          >
        </div>
        <div class="user">
          <span>用户名称</span>
          <el-button
            type="primary"
            size="small"
            @click="logOut"
            >退出登录</el-button
          >
        </div>
      </div>
    </el-header>
  </div>
</template>

<script>
export default {
  name: "Title",
  methods: {
    // 传参区别点击的是MD 还是导图 进行跳转
    handleCommand(command) {
      if (command == "a") {
        this.$router.push({ path: "/home?command=a" });
      }
      if (command == "b") {
        this.$router.push({ path: "/home?command=b" });
      }
    },
    // 退出登录
     logOut(){
       this.$store.dispatch('loginOut')
    }
  },
};
</script>

<style>
.header-container {
  font-size: 30px;
}
</style>